<template>
	<div id="gps-tools" class="gps-tools-box" >
		<el-popover ref="measurePopover" popper-class="lbs-bg-transparent" placement="bottom" trigger="manual" v-model="measureVisible">
		 <el-radio-group v-model="measure.type" size="small" @change="measureChange">
			<el-radio label="LineString" border>{{$t("map.toolMeasureDistance")}}</el-radio>
			<el-radio label="Polygon" border>{{$t("map.toolMeasureArea")}}</el-radio>
		</el-radio-group>&nbsp;&nbsp;&nbsp;&nbsp;
		 <el-button size="small" type="danger" @click="measureCancel">{{$t("common.cancel")}}</el-button>
		 <el-button size="small" type="warning" @click="measureClean">{{$t("common.clean")}}</el-button>
	 </el-popover>

	 <el-popover ref="geoPopover" popper-class="lbs-bg-transparent" placement="bottom-start" trigger="manual" v-model="geoVisible">
		 <Geofence :visible="geoVisible"></Geofence>
	 </el-popover>

		<el-popover ref="customLayersPopover" popper-class="lbs-bg-transparent" placement="bottom-start" trigger="manual" v-model="customLayersVisible">
			<CustomLayer :visible="customLayersVisible"></CustomLayer>
	 </el-popover>
	 <el-popover ref="poisPopover" popper-class="lbs-bg-transparent" placement="bottom-start" trigger="manual" v-model="poisVisible">
		 	<Poi  :visible="poisVisible"></Poi>
	</el-popover>

	 <el-popover ref="msgPopover" popper-class="lbs-bg-transparent" placement="bottom" trigger="manual" v-model="messageVisible">
			<Message :visible="messageVisible"></Message>
		</el-popover>

		<el-button-group>
		   <el-button type="primary" size="medium"  @click="bubbleBtn"><font-awesome-icon :icon="$store.state.user.bubble.hide?'comment':'comment-slash'"/> {{$t("map.toolBubble")}}</el-button>
		     <el-button type="primary" size="medium" :disabled="this.$store.state.user.map.mode!=1"  @click="trackBtn"><font-awesome-icon :icon="this.$store.state.user.map.isTrackCenter?'eye':'eye-slash'"/> {{$t("map.toolTrack")}}</el-button>
				 <el-button type="primary" size="medium"   v-popover:measurePopover @click="handleMeasure"><font-awesome-icon icon="ruler"/> {{$t("map.toolMeasure")}}</el-button>
				 <!-- <el-button type="primary" size="medium" @click="$parent.downLoad"><font-awesome-icon icon="download"/> 下载</el-button> -->
				<el-button type="primary" size="medium"> <font-awesome-icon icon="map"/>
						<el-dropdown trigger="click" @command="handleCommandMap">
							<span  style="color:#fff">&nbsp;&nbsp;{{$t("map.toolMap")}}<i class="el-icon-arrow-down el-icon--right"></i></span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item v-for="(item, index) in $store.state.user.map.types" :key="index" v-show="item.enable" :disabled="$store.state.user.map.type==item.value"  :command="item.value">{{item.label}}</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</el-button>

					<el-button v-if="hasPermission('user:layer:view')" type="primary" size="medium"  v-popover:customLayersPopover @click="handleCustomLayers"><font-awesome-icon icon="clone"/> {{$t("map.toolLayer")}}</el-button>
					<el-button v-if="hasPermission('user:poi:view')" type="primary" size="medium"  v-popover:poisPopover @click="handlePois"><font-awesome-icon icon="paint-brush"/> {{$t("map.toolPoi")}}</el-button>
					<el-button v-if="hasPermission('user:geofence:view')" type="primary" size="medium" :disabled="this.$store.state.user.map.mode==2"  v-popover:geoPopover @click="handleGeofence"><font-awesome-icon icon="street-view"/> {{$t("map.toolFence")}}</el-button>
		      <el-button  type="primary" size="medium" v-popover:msgPopover  @click="handleMessage"> <el-badge :value="this.$store.state.user.message.eventCount" class="item"><font-awesome-icon icon="bell"/> {{$t("map.toolMessage")}}</el-badge></el-button>
		      <el-button type="primary" size="medium" class="fas"  @click="fullScreen"><font-awesome-icon :icon="flag?'expand':'arrows-alt'"/> {{flag?$t("map.toolExitFullScreen"):$t("map.toolFullScreen")}}</el-button>
		</el-button-group>
		<audio id="audio" controls="controls" style="display:none" ref="audio">
			  <source src="'../../../static/sound/zs.mp3" type="audio/mpeg">
			</audio>
	</div>
</template>

<script>
	import '@/styles/gps-tools.scss';
	import util from '@/utils/util';
	import Message from './Message'; //消息
	import Geofence from './Geofence'; //围栏
	import CustomLayer from './Layer'; //自定义图层
	import Poi from './Poi'; //我的兴趣点
	import { getEvents } from '@/api/api';

	export default {
		name:'toolsbox',
		data() {
			return{
				geoVisible:false,
				messageVisible:false,
				measureVisible:false,
				customLayersVisible:false,
				poisVisible:false,
				msgs: [],
				flag:false,
				fullScreenText:'全屏',

				mapType: (localStorage.map?JSON.parse(localStorage.map).type:'gaode'),
				measure:{
					type:'Circle',
					clean:false,
					editable:false,
				}
			}
		},
		methods:{
			handleGeofence(){
				this.geoVisible = (this.geoVisible?false:true);
				if(this.geoVisible){
					this.poisVisible=false;
				}
			},
			handleMessage(){
				this.messageVisible = (this.messageVisible?false:true);
			},
			handleMeasure(){
				this.measureVisible = (this.measureVisible?false:true);
			},
			handleCustomLayers(){
				this.customLayersVisible = (this.customLayersVisible?false:true);
			},
			handlePois(){
					this.poisVisible = (this.poisVisible?false:true);
					if(this.poisVisible){
						this.geoVisible=false;
					}
			},
			// showMessages(){
			// 	this.messageVisible = true
			// },
			// hideMessages(){
			// 	this.messageVisible = false
			// },

			bubbleBtn(){
				if(this.$store.state.user.devices.selectId!=0){
					this.$store.dispatch('isShowBoubble');
				}
			},
			trackBtn(){
					this.$store.dispatch('isTrackCenter');
			},
			measureChange(type){
				var 	measure ={
						type:type,
						clean:false,
						editable:true,
					}
					this.$store.dispatch('setMeasureEnable',measure);
			},
			measureCancel(){
				var 	measure ={
						type:this.$store.state.user.measure.type,
						clean:false,
						editable:false,
					}
					this.$store.dispatch('setMeasureEnable',measure);
			},
			measureClean(){
				var 	measure ={
					type:this.$store.state.user.measure.type,
					clean:true,
					editable:false,
					}
					this.$store.dispatch('setMeasureEnable',measure);
			},

			handleCommandMap(val){
				var map = {'type':val}
				localStorage.map = JSON.stringify(map);
				 this.$store.dispatch('setMapValues',[{key:'type',value:val}]);
			},
			fullScreen(){

				this.flag =!this.flag
				if(this.flag){
					util.fullScreen();
				}
				else{
					util.exitFullScreen();
				}

			}
		},
		mounted(){

		},
		components: {
			"Message":Message,
			"Geofence":Geofence,
			CustomLayer,
			Poi
		},
		watch: {
			'$store.state.user.playAlarmSound': function(nv, ov) {
				 if(nv){
				 	this.$el.querySelector("#audio").play();
				 	this.$store.dispatch('setPlayAlarmSound',false);
				 }
			}

		}
	}
</script>
